<template>
	<view class="container">
		<view class="header">
			<text class="back-button" @tap="goBack">←</text> <!-- 返回按钮 -->
			<text class="title">目录</text>
		</view>
		<view class="content">
			<view class="chapter" v-for="(chapter, index) in chapters" :key="index" @tap="openChapter(chapter.catalogId)">
				<text class="chapter-title">{{ chapter.orderNum+1 }}. {{ chapter.title }}</text>
				<text class="chapter-description">{{ chapter.description }}</text> <!--章节描述-->
			</view>
		</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	const token = Cookies.get('token');
	export default {
		data() {
			return {
				chapters: []
			}
		},
		onLoad(options) {
			const bookId = options.bookId;
			this.getCatalog(bookId);
		},
		methods: {
			openChapter(chapterId) {
				// 跳转到章节的实现，假设有个章节详情页
				uni.navigateTo({
					url: `/pages/detail/chapter?chapterId=${chapterId}`
				});
			},
			getCatalog(bookId) {
				// 从Cookie获取token
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/chapter/${bookId}`, // 后端API端点
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200 && res.data.code === 1) {
							this.chapters=res.data.data;
						} else {
							uni.showToast({
								title: `${res.data.msg}`,
								icon: 'snone'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				})
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f0f4f8;
		/* 小清新背景色 */
		height: 100vh;
		/* 确保容器高度为100vh以适应屏幕 */
	}

	.header {
		background-color: #4a90e2;
		/* 更深的蓝色，带来视觉层次感 */
		padding: 16px;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.back-button {
		position: absolute;
		/* 绝对定位以放置返回按钮 */
		left: 16px;
		/* 左边距 */
		top: 16px;
		/* 顶部边距 */
		font-size: 20px;
		/* 大字号 */
		color: #ffffff;
		/* 白色按钮 */
		cursor: pointer;
		/* 指针效果 */
	}

	.title {
		font-size: 26px;
		font-weight: bold;
		color: #ffffff;
		/* 白色标题 */
	}

	.content {
		flex: 1;
		padding: 16px;
		overflow-y: auto;
		/* 可以滚动 */
	}

	.chapter {
		background-color: #ffffff;
		padding: 16px;
		margin-bottom: 12px;
		border-radius: 10px;
		/* 更圆的角 */
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s, box-shadow 0.3s;
		/* 更平滑的过渡效果 */
	}

	.chapter:hover {
		transform: scale(1.03);
		/* 悬停时轻微放大 */
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		/* 悬停时增加阴影 */
	}

	.chapter-title {
		font-size: 22px;
		color: #2c3e50;
		font-weight: 600;
	}

	.chapter-page {
		font-size: 16px;
		color: #7f8c8d;
	}

	.chapter-description {
		font-size: 14px;
		color: #95a5a6;
		/* 淡色，用于描述文本 */
		margin-top: 4px;
		/* 给予一些间距 */
	}
</style>